<template>
	<view class="center-phone">
		<u-navbar
			back-icon-name="arrow-left"
			title-size="32"
			title-color="#000"
			:title="title" :title-bold="true"
			>
			<view class="navbar-right" slot="right">
				<view
					v-if="check == 1"
					class="message-box right-item"
					style="padding-right: 30rpx; color: #FE2347;">
					删除
				</view>
			</view>
		</u-navbar>
		<view class="center-box-p ">
			<view class="fiex-check" v-for="(item, index) in img" :key="index">
				<image  :src="item.img" mode=""></image>
			</view>
			<u-upload v-if="check == 2" width="165" height="165" :action="action"></u-upload>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '免费相册',
				action: '',
				check: 2,
				img: [{
					img: '../../static/img.jpg'
				},{
					img: '../../static/img.jpg'
				},{
					img: '../../static/img.jpg'
				},{
					img: '../../static/img.jpg'
				},{
					img: '../../static/img.jpg'
				},{
					img: '../../static/img.jpg'
				},{
					img: '../../static/img.jpg'
				},{
					img: '../../static/img.jpg'
				}]
			}
		},
		onLoad(e) {
			console.log('e.classText==>', e.classText);
			if (e.classText == 8) {
				this.title = '付费相册'
			} else {
				this.title = '免费相册'
			}
		},
		methods: {
			checkboxGroupChange(e) {
				console.log(e);
			},
			
			longtapRemove(e) {
				this.check = 1
				console.log('e==>', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center-phone {


		.center-box-p {
			padding: 30rpx 30rpx 0 30rpx;
			display: flex !important;
			justify-content: space-between;
			flex-wrap: wrap;

			image {
				width: 165rpx;
				height: 165rpx;
				border-radius: 10rpx;
				word-wrap: break-word;
				word-break: normal;
				margin: 0 0rpx 10rpx 0;
			}

			// image:nth-child(4n+0) {
			// 	margin-right: 0;
			// }

			.fiex-check {
				position: relative;


				.u-checkbox {
					position: absolute;
					top: 10rpx;
					right: -10rpx;
				}
			}
		}

	}
</style>
